.base {
  position: relative;
  container: cui-notification-banner / inline-size;
  overflow: hidden;
  border-radius: var(--cui-border-radius-mega);
  transition:
    opacity 200ms ease-in-out,
    height 200ms ease-in-out,
    visibility 200ms ease-in-out;
}

.grid {
  display: grid;
  grid-template-areas: "content image" "button image";
  grid-template-columns: minmax(150px, 1fr) auto;
}

@container cui-notification-banner (width > 960px) {
  .grid {
    grid-template-areas: "image content button";
    grid-template-columns: auto minmax(150px, 1fr) auto;
    align-items: center;
  }
}

/* Variants */

.system {
  background-color: var(--cui-bg-accent);
}

.promotional {
  background-color: var(--cui-bg-subtle);
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--cui-spacings-byte);
  max-width: 600px;
  margin-top: var(--cui-spacings-giga);
  margin-right: var(--cui-spacings-byte);
  margin-left: var(--cui-spacings-giga);
}

@container cui-notification-banner (width > 960px) {
  .content {
    grid-area: content;
    margin-right: 0;
    margin-bottom: var(--cui-spacings-giga);
    margin-left: var(--cui-spacings-byte);
  }
}

/* Child elements */

.base .headline {
  font-size: var(--cui-headline-s-font-size);
  line-height: var(--cui-headline-s-line-height);
}

@media (min-width: 768px) {
  .base .headline {
    font-size: var(--cui-headline-m-font-size);
    line-height: var(--cui-headline-m-line-height);
  }
}

.base .body {
  font-size: var(--cui-body-s-font-size);
  line-height: var(--cui-body-s-line-height);
}

@media (min-width: 768px) {
  .base .body {
    font-size: var(--cui-body-m-font-size);
    line-height: var(--cui-body-m-line-height);
  }
}

.button {
  grid-area: button;
  width: fit-content;
  margin-top: var(--cui-spacings-byte);
  margin-right: var(--cui-spacings-byte);
  margin-bottom: var(--cui-spacings-giga);
  margin-left: var(--cui-spacings-giga);
}

@container cui-notification-banner (width > 960px) {
  .button {
    margin: var(--cui-spacings-giga);
  }
}

.base .image {
  grid-area: image;
  align-self: stretch;
  width: var(--notification-image-width);
  min-width: 0;
  height: auto;
  object-fit: contain;
  object-position: var(--notification-image-align);
  border-radius: 0 var(--cui-border-radius-mega) var(--cui-border-radius-mega) 0;
}

.base .close {
  position: absolute;
  top: var(--cui-spacings-byte);
  right: var(--cui-spacings-byte);
}

.system .close {
  background-color: var(--cui-bg-accent);
}

.promotional .close {
  background-color: var(--cui-bg-subtle);
}
